<script setup>

import {nextTick, onMounted} from "vue";
import * as echarts from "echarts";
import geoJson from "@/assets/210900.json";

onMounted(async () => {
  await left1Chart()
})

const left1Chart = async () => {
  await nextTick()
  setTimeout(() => {
    const myChart = echarts.init(document.getElementById('map'))
    echarts.registerMap('阜新', geoJson);
    myChart.hideLoading();
    const points = [
      {value: [121.822436,42.06659, 280]},
      {value: [122.290417,42.378546, 280]},
      {value: [122.047228,42.247756, 280]},
      {value: [121.575797,42.017519, 280]},
      {value: [121.591607,41.951888, 280]},
    ];
    const itemStyle = {
      areaColor: 'rgba(0,0,0,0.39)',
      color: '#fff',
      borderColor: '#228de5',
      borderWidth: 2,
      shadowColor: 'rgb(0,0,0)',
      shadowBlur: 35,
      shadowOffsetX: 10,
      shadowOffsetY: 25,
    }
    const option = {
      geo: [
        {
          map: '阜新',
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          layoutCenter: ['50%', '46%'], //地图位置
          layoutSize: '100%',
          zlevel: 8,
          itemStyle,
          silent:false
        },
        {
          map: '阜新',
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          zlevel: 7,
          layoutCenter: ['50%', '47%'], //地图位置
          layoutSize: '100%',
          itemStyle,
          select:false
        },
        {
          map: '阜新',
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          layoutCenter: ['50%', '48%'], //地图位置
          layoutSize: '100%',
          itemStyle,
          select: {
            disabled: false
          },
          emphasis: {
            disabled: false
          },
        }
      ],
      series: [
        {
          type: 'map',
          layoutCenter: ['50%', '45%'], //地图位置
          layoutSize: '100%',
          label: {
            normal: {
              show: true,
              distance: 110,
              fontSize: '14',
              color: '#FEFEFE',
              borderWidth: 0,
              backgroundColor: 'rgba(0,0,0,0.4)',
              padding: 8,
              borderRadius: 5,
            },
            emphasis: {
              show: true,
              fontFamily: 'SourceHanSansCN',
              fontSize: '14',
              color: '#FEFEFE',
            },
          },
          // tooltip:{} tooltip可结合formatter、div、css实现样式
          itemStyle: {
            // 渐变
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {
                  offset: 0,
                  color: '#228de5', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#123970', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            color: '#fff',
            borderColor: '#52ddfc',
            borderWidth: 1,
            shadowColor: 'rgb(0,0,0)',
            shadowBlur: 15,
            shadowOffsetX: 1,
            shadowOffsetY: 15,
          },
          zlevel: 10,
          map: '阜新',
          data: [
            {
              name: '太平区',
              label:{
                offset: [10, 0],
              },
              labelLine: {
                show: true,
              },
            }
          ]
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: points,
          symbolSize: '10',
          showEffectOn: 'render',
          rippleEffect: {
            scale: 3,
            brushType: 'stroke'
          },
          hoverAnimation: true,
          itemStyle: {
            normal: {
              color: '#FFFF00',
              shadowBlur: 10,
              shadowColor: '#FFFF00'
            }
          },
          zlevel: 11
        }
      ]
    };
    myChart.setOption(option);
  }, 500)
}
</script>

<template>
  <div id="map"></div>
</template>

<style scoped lang="scss">
#map {
  width: 100%;
  height: 100%;
}
</style>
